<template>
  <!-- 轮播配置页面 -->
  <div>
    <!-- 头部 -->
    <div class="header">
      <el-button type="primary" round @click="addCarousel">新增</el-button>
      <el-button type="primary" round @click="showCarousel">预览</el-button>
    </div>
    <!-- 表格 -->
    <div class="table_content">
      <el-table :data="carouselData" style="width: 100%">
        <!-- 序号 -->
        <el-table-column prop="id" label="序号" align="center">
        </el-table-column>
        <!-- 轮播图名称 -->
        <el-table-column prop="name" label="轮播图名称" align="center">
        </el-table-column>
        <!-- 轮播图描述 -->
        <el-table-column prop="introduce" label="轮播图描述" align="center">
        </el-table-column>
        <!-- 轮播图图片 -->
        <el-table-column label="轮播图图片" align="center">
          <!-- 作用域插槽 -->
          <template slot-scope="scope">
            <el-image
              style="width: 40px; height: 40px"
              :src="scope.row.url"
              :preview-src-list="[scope.row.url]"
            >
            </el-image>
          </template>
        </el-table-column>
        <!-- 状态 -->
        <el-table-column prop="status" label="状态" align="center">
        </el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              @click="editCarousel(scope.row)"
              circle
              plain
              type="warning"
              style="color: green"
            >
              编辑
            </el-button>
            <el-button
              style="color: red"
              circle
              type="danger"
              plain
              @click="clickDelete(scope.row.id)"
              >删除</el-button
            >
            <el-button
              v-if="scope.row.status == '正常'"
              style="color: blue"
              circle
              type="success"
              plain
              @click="clickUpdate(scope.row)"
              >停用</el-button
            >
            <el-button
              type="success"
              plain
              v-else-if="scope.row.status == '停用'"
              style="color: blue"
              circle
              @click="clickUpdate(scope.row)"
              >启用</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 模态框 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      @click="dialogClose"
    >
      <!-- 表单区域 -->
      <el-form :model="carouselForm" :rules="rules" ref="carousel_Form">
        <!-- 名称 -->
        <el-form-item label="名称" prop="name">
          <el-input v-model="carouselForm.name"></el-input>
        </el-form-item>
        <!-- 轮播图片 -->
        <el-form-item label="轮播图片" prop="url">
          <el-upload
            class="avatar-uploader"
            :action="uploadFileURL"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="carouselForm.url" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <!-- 描述 -->
        <el-form-item label="描述" prop="introduce">
          <el-input type="textarea" v-model="carouselForm.introduce"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogClose">取 消</el-button>
        <!-- 提交表单后调用重置表单方法 -->
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 轮播图 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible1">
      <template>
        <el-carousel :interval="4000" type="card" height="300px">
          <el-carousel-item
            v-for="(item, index) in showCarouselData"
            :key="index"
          >
            <el-image style="width: 100%; height: 100%" :src="item.url">
            </el-image>
          </el-carousel-item>
        </el-carousel>
      </template>
      <span slot="footer" class="dialog-footer">
        <el-button
          @click="dialogVisible1 = false"
          type="primary"
          round
          size="small"
          >关 闭</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { get, post } from "@/utils/request";
import { showFileURL, uploadFileURL } from "@/utils/config";

export default {
  data() {
    return {
      carouselData: [],
      showCarouselData: [],
      uploadFileURL,
      imageUrl: "",
      carouselForm: {},
      rules: {
        //名称
        name: [
          { required: true, message: "请输入轮播图名称", trigger: "blur" },
        ],
        //图片
        url: [
          { required: true, message: "请选择轮播图图片", trigger: "change" },
        ],
      },
      dialogTitle: "",
      dialogVisible: false,
      dialogVisible1: false,
    };
  },
  computed: {},
  methods: {
    //获取轮播图
    async getCarouselData() {
      let res = await get("/carousel/query");
      // console.log(res.data);
      this.carouselData = res.data;
    },
    async getShowCarouselData() {
      let res = await get("/carousel/query", { status: "正常" });
      console.log(res.data);
      this.showCarouselData = res.data;
    },
    //新增轮播图
    addCarousel() {
      this.dialogTitle = "添加轮播图";
      this.dialogVisible = true;
      this.carouselForm = {};
      //将imgurl置空
      this.imageUrl = "";
    },
    //预览轮播图
    showCarousel() {
      this.dialogVisible1 = true;
      this.dialogTitle = "大屏预览";
      this.getShowCarouselData();
    },
    //编辑轮播图id
    editCarousel(row) {
      this.carouselForm = { ...row };
      //预览图片地址赋值
      this.imageUrl = this.carouselForm.url;
      this.dialogTitle = "编辑轮播图";
      this.dialogVisible = true;
    },
    //删除轮播图
    async clickDelete(id) {
      let res = await get("/carousel/deleteById", { id });
      if (res.status == 200) {
        this.$message({
          message: res.message,
          type: "success",
        });
        //刷新页面
        this.getCarouselData();
      } else {
        this.$message.error(res.message);
      }
    },
    //更新轮播图状态
    async clickUpdate(row) {
      if (row.status == "正常") {
        // this.obj.status = "停用";
        row.status = "停用";
        // console.log({ ...row, ...this.status });
        let res = await post("/carousel/saveOrUpdate", row);
        //console.log(res);
        if (res.status == 200) {
          this.$message({
            message: res.message,
            type: "success",
          });
          //刷新页面
          this.getCarouselData();
        } else {
          this.$message.error(res.message);
        }
        // console.log(res);
      } else if (row.status == "停用") {
        row.status = "正常";
        // console.log({ ...row, ...this.status });
        let res = await post("/carousel/saveOrUpdate", row);
        // console.log(res);
        if (res.status == 200) {
          this.$message({
            message: res.message,
            type: "success",
          });
          //刷新页面
          this.getCarouselData();
        } else {
          this.$message.error(res.message);
        }
      }
    },
    //上传图片
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      // console.log(res);
      //上传成功后更新carouselForm.url的路径
      this.carouselForm.url = showFileURL + res.data.id;
    },
    //上传前预览
    beforeAvatarUpload(file) {
      const isLt3M = file.size / 1024 / 1024 < 3;
      if (!isLt3M) {
        this.$message.error("上传头像图片大小不能超过 3MB!");
      }
    },
    dialogClose() {
      this.$refs["carousel_Form"].resetFields();
      setTimeout(() => {
        this.dialogVisible = false;
      }, 200);
    },
    //提交按钮
    submitForm() {
      this.$refs["carousel_Form"].validate(async (valid) => {
        if (valid) {
          let res = await post("/carousel/saveOrUpdate", this.carouselForm);
          if (res.status == 200) {
            this.$message({
              message: res.message,
              type: "success",
            });
            //刷新页面
            this.getCarouselData();
            this.dialogClose();
          } else {
            this.$message.error(res.message);
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
  created() {
    this.getCarouselData();
  },
  mounted() {},
};
</script>
<style scoped>
</style>